<template>
  <!-- 自定义日期 -->
  <custom-range-ana-vue @update-between-time="handleBetweenTime" class="customHeader">
    <template v-slot:custom>
      <view style="padding: 0 30rpx;padding-bottom: 20rpx;" class="flex-ali-cen">
        <picker @change="bindPickerChangeShop" :value="shopIndex"
                :range="shopList.map(item=>item.shop_alias)">
          <view class="flex-row flex-jus-bet" style="width: 100%;flex: 1">
            <view class="flex-row">
              <view class="f-s-28" style="color: var(--grey-text);">当前门店：</view>
              <view class="f-s-28" style="color: var(--white-text);align-items: center;">
                {{ shopList[shopIndex].shop_alias }}
              </view>
            </view>
            <view class="flex-row">
              <view class="f-s-28" style="color: #0A84FF;align-items: center">
                切换门店
              </view>
              <view style="margin-left: 4rpx">
                <uni-icons type="down" size="14" color="#0A84FF"></uni-icons>
              </view>
            </view>

          </view>
        </picker>
      </view>
    </template>
  </custom-range-ana-vue>
  <!-- 区域内容 -->
  <scroll-view class="scroll" scroll-y style="box-sizing: border-box" :style="{'top':scrollTop,'height':scrollHeight}"
               :show-scrollbar="false" :scroll-top="top" @scroll="scroll">
    <view class="body-child p-t-16 p-b-16">
      <!-- 营业概况统计 -->
      <view class="body-content">
        <view class="body-title">营业概况</view>
        <view class="flex-col">
          <view class="flex-row flex-jus-bet flex-ali-cen">
            <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
              <view class="content-value">{{ formatAmount(businessData.business_money) || 0 }}</view>
              <view class="content-intro" style="margin-top: 10rpx;">
                营业额({{ businessData.business_money >= 10000 ? '万' : '元' }})
              </view>
            </view>
            <view class="header-field-title-split"></view>
            <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
              <view class="content-value">{{ formatAmount(businessData.all_money) || 0 }}</view>
              <view class="content-intro" style="margin-top: 10rpx;">
                销售额({{ businessData.all_money >= 10000 ? '万' : '元' }})
              </view>
            </view>
            <view class="header-field-title-split"></view>
            <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
              <view class="content-value">{{ formatAmount(businessData.receipts_charge_money) || 0 }}</view>
              <view class="content-intro" style="margin-top: 10rpx;">
                充值金额({{ businessData.receipts_charge_money >= 10000 ? '万' : '元' }})
              </view>
            </view>
          </view>
          <view class="line-split" style="margin: 20rpx 0;"></view>
          <view class="flex-row flex-jus-bet flex-ali-cen">
            <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
              <view class="content-value">{{ formatNumber(businessData.open_room_all_number) || 0 }}</view>
              <view class="content-intro" style="margin-top: 10rpx;">开台数(桌)</view>
            </view>
            <view class="header-field-title-split"></view>
            <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
              <view class="content-value">{{ formatNumber(businessData.open_rate) || 0 }}%</view>
              <view class="content-intro" style="margin-top: 10rpx;">开台率(%)</view>
            </view>
            <view class="header-field-title-split"></view>
            <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
              <view class="content-value">{{ formatNumber(businessData.avg_room_money) || 0 }}</view>
              <view class="content-intro" style="margin-top: 10rpx;">桌均消(元)</view>
            </view>
          </view>
          <view class="line-split" style="margin: 20rpx 0;"></view>
          <view class="flex-row flex-jus-bet flex-ali-cen">
            <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
              <view class="content-value">{{ formatNumber(businessData.reach_number) || 0 }}</view>
              <view class="content-intro" style="margin-top: 10rpx;">达低消(桌)</view>
            </view>
            <view class="header-field-title-split"></view>
            <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
              <view class="content-value">{{ formatNumber(businessData.no_reach_number) || 0 }}</view>
              <view class="content-intro" style="margin-top: 10rpx;">未达低消(桌)</view>
            </view>
            <view class="header-field-title-split"></view>
            <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
              <view class="content-value">
                {{ convertMinutesToHours(businessData.consumption_duration) }}
              </view>
              <view class="content-intro" style="margin-top: 10rpx;">消费时长</view>
            </view>
          </view>
          <view class="line-split" style="margin: 20rpx 0;"></view>
          <view @click="businessMore = !businessMore" v-if="!businessMore" class="content-title"
                style="color: #5697D7;text-align: center;">查看更多
          </view>
          <view v-else>
            <view class="flex-row flex-jus-bet flex-ali-cen">
              <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
                <view class="content-value">{{ formatNumber(businessData.rock_number) || 0 }}</view>
                <view class="content-intro" style="margin-top: 10rpx;">翻台(桌)</view>
              </view>
              <view class="header-field-title-split"></view>
              <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
                <view class="content-value">{{ formatNumber(businessData.rock_rate) || 0 }}%</view>
                <view class="content-intro" style="margin-top: 10rpx;">翻台率(%)</view>
              </view>
              <view class="header-field-title-split"></view>
              <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
                <view class="content-value">{{ formatAmount(businessData.rock_rmoney) || 0 }}</view>
                <view class="content-intro" style="margin-top: 10rpx;">
                  翻台营业({{ businessData.rock_rmoney >= 10000 ? '万' : '元' }})
                </view>
              </view>
            </view>
            <view class="line-split" style="margin: 20rpx 0;"></view>
            <view class="flex-row flex-jus-bet flex-ali-cen">
              <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
                <view class="content-value">{{ formatNumber(businessData.dy_write_number) || 0 }}</view>
                <view class="content-intro" style="margin-top: 10rpx;">抖音核销(单)</view>
              </view>
              <view class="header-field-title-split"></view>
              <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
                <view class="content-value">{{ formatAmount(businessData.dy_write_money) || 0 }}</view>
                <view class="content-intro" style="margin-top: 10rpx;">
                  核销金额({{ businessData.dy_write_money >= 10000 ? '万' : '元' }})
                </view>
              </view>
              <view class="header-field-title-split"></view>
              <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
                <view class="content-value">{{ formatAmount(businessData.dy_two_consum) || 0 }} /
                  {{ formatNumber(businessData.dy_two_consum_rate) || 0 }}%
                </view>
                <view class="content-intro" style="margin-top: 10rpx;">
                  二消({{ businessData.dy_two_consum >= 10000 ? '万' : '元' }})/占比
                </view>
              </view>
            </view>
            <view class="line-split" style="margin: 20rpx 0;"></view>
            <view class="flex-row flex-jus-bet flex-ali-cen">
              <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
                <view class="content-value">{{ formatNumber(businessData.mt_write_number) || 0 }}</view>
                <view class="content-intro" style="margin-top: 10rpx;">美团核销(单)</view>
              </view>
              <view class="header-field-title-split"></view>
              <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
                <view class="content-value">{{ formatAmount(businessData.mt_write_money) || 0 }}</view>
                <view class="content-intro" style="margin-top: 10rpx;">
                  核销金额({{ businessData.mt_write_money >= 10000 ? '万' : '元' }})
                </view>
              </view>
              <view class="header-field-title-split"></view>
              <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
                <view class="content-value">{{ formatAmount(businessData.mt_two_consum) || 0 }} /
                  {{ formatNumber(businessData.mt_two_consum_rate) || 0 }}%
                </view>
                <view class="content-intro" style="margin-top: 10rpx;">
                  二消({{ businessData.mt_two_consum >= 10000 ? '万' : '元' }})/占比
                </view>
              </view>
            </view>
            <view class="line-split" style="margin: 20rpx 0;"></view>
            <view class="flex-row flex-jus-bet flex-ali-cen">
              <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
                <view class="content-value">{{ formatNumber(businessData.sm_number) || 0 }}</view>
                <view class="content-intro" style="margin-top: 10rpx;">扫码订单(单)</view>
              </view>
              <view class="header-field-title-split"></view>
              <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
                <view class="content-value">{{ formatAmount(businessData.sm_money) || 0 }}</view>
                <view class="content-intro" style="margin-top: 10rpx;">
                  消费金额({{ businessData.sm_money >= 10000 ? '万' : '元' }})
                </view>
              </view>
              <view class="header-field-title-split"></view>
              <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
                <view class="content-value">{{ formatNumber(businessData.sm_two_money_rate) || 0 }}%
                </view>
                <view class="content-intro" style="margin-top: 10rpx;">占比</view>
              </view>
            </view>
            <view @click="businessMore = !businessMore" v-if="businessMore" class="content-title"
                  style="color: #5697D7;text-align: center;margin-top: 20rpx;">向上收起
            </view>
          </view>
        </view>
      </view>

      <!-- 营业走势 -->
      <view class="body-content" style="margin-top: 30rpx;">
        <view class="body-title">营业走势</view>
        <view class="content-intro"
              style="font-size: 24rpx;height: 40rpx;line-height: 40rpx;color: var(--grey-text);margin-bottom: 20rpx;">
          近12个月每月的营业走势图，可滑动图表进行查看
        </view>
        <view class="charts-box" style="width: 100%;height: 100%;">
          <qiun-data-charts :disableScroll="true" type="column" :opts="trendMonthOpts" :background="backColor"
                            :ontouch="true" :chartData="trendMonthData"/>
        </view>
      </view>

      <!-- 分类收入 -->
      <view class="body-content" style="margin-top: 30rpx;">
        <view class="body-title">分类收入</view>
        <view class="content-intro"
              style="font-size: 24rpx;height: 40rpx;line-height: 40rpx;color: var(--grey-text);">
          最大展示销量前十，单位（万）
        </view>
        <view class="charts-box" :style="{'height': goodsTypeDataHeight}"
              v-if="Object.keys(goodsTypeData).length > 0 && goodsTypeData.categories.length>0">
          <qiun-data-charts type="bar" :opts="goodsTypeDataOpts" :chartData="goodsTypeData"/>
        </view>
        <view v-else class="content-intro" style="margin: 120rpx;text-align: center;">
          暂无数据~
        </view>
        <view class="content-title" @click="goodsTypeMoreLoad('more')"
              v-if="!goodsTypeMore && goodsTypeData && Object.keys(goodsTypeData).length > 0 && goodsTypeData?.categories?.length > 0"
              style="color: #5697D7;text-align: center;margin-top: 20rpx;">查看更多
        </view>
        <view class="content-title" @click="goodsTypeMoreLoad('default')"
              v-if="goodsTypeMore && goodsTypeData && Object.keys(goodsTypeData).length > 0 && goodsTypeData?.categories?.length > 0"
              style="color: #5697D7;text-align: center;margin-top: 20rpx;">向上收起
        </view>
      </view>

      <!-- 抖音美团二消数据 -->
      <view class="body-content" style="margin-top: 30rpx;">
        <view class="body-title">团购二消(美团、抖音)</view>
        <view class="flex-row flex-jus-bet flex-ali-cen" style="margin-top: 20rpx;">
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">{{ formatNumber(buyingStatis.number) || 0 }}</view>
            <view class="content-intro" style="margin-top: 10rpx;">数量</view>
          </view>
          <view class="header-field-title-split"></view>
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">{{ formatAmount(buyingStatis.fact_money) || 0 }}</view>
            <view class="content-intro" style="margin-top: 10rpx;">
              金额({{ buyingStatis.fact_money >= 10000 ? '万' : '元' }})
            </view>
          </view>
          <view class="header-field-title-split"></view>
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">{{ formatNumber(buyingStatis.two_number) || 0 }}</view>
            <view class="content-intro" style="margin-top: 10rpx;">二消(单)</view>
          </view>
          <view class="header-field-title-split"></view>
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">{{ formatAmount(buyingStatis.two_fact_money) || 0 }}</view>
            <view class="content-intro" style="margin-top: 10rpx;">
              二消({{ buyingStatis.two_fact_money >= 10000 ? '万' : '元' }})
            </view>
          </view>
        </view>
        <view class="line-split" style="margin: 30rpx 0;"></view>
        <view class="sub-title">美团</view>
        <view class="flex-row flex-jus-bet flex-ali-cen" style="margin-top: 30rpx;">
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">{{ formatNumber(mtBuyingStatis.number) || 0 }}</view>
            <view class="content-intro" style="margin-top: 10rpx;">数量</view>
          </view>
          <view class="header-field-title-split"></view>
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">{{ formatAmount(mtBuyingStatis.fact_money) || 0 }}</view>
            <view class="content-intro" style="margin-top: 10rpx;">
              金额({{ mtBuyingStatis.fact_money >= 10000 ? '万' : '元' }})
            </view>
          </view>
          <view class="header-field-title-split"></view>
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">{{ formatNumber(mtBuyingStatis.two_number) || 0 }}</view>
            <view class="content-intro" style="margin-top: 10rpx;">二消(单)</view>
          </view>
          <view class="header-field-title-split"></view>
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">{{ formatAmount(mtBuyingStatis.two_fact_money) || 0 }}</view>
            <view class="content-intro" style="margin-top: 10rpx;">
              二消({{ mtBuyingStatis.two_fact_money >= 10000 ? '万' : '元' }})
            </view>
          </view>
        </view>
        <!-- <view class="line-split" style="margin: 30rpx 0;"></view> -->
        <view class="flex-row" style="margin-top: 30rpx;margin-bottom: 30rpx;">
          <view class="content-intro" style="width: 48%;">酒水名称(T5)</view>
          <view class="content-intro" style="width: 25%;">数量/金额</view>
          <view class="content-intro flex-row flex-jus-end" style="width: 27%;">二消/金额</view>
        </view>

        <view>
          <view class="flex-row" style="margin-top: 20rpx;"
                v-for="(item,index) in mtGroupBuyingData.slice(0,5)" :key="index">
            <view class="content-value"
                  style="width: 48%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap">
              {{ index + 1 }}.{{ item.specs_name }}
            </view>
            <view class="content-value" style="width: 25%;">
              {{ formatNumber(item.number) }} / {{ formatNumber(item.fact_money) }}
            </view>
            <view class="content-value flex-row flex-jus-end" style="width: 27%;">
              {{ formatNumber(item.two_number) }} / {{ formatNumber(item.two_fact_money) }}
            </view>
          </view>
        </view>
        <view v-if="mtGroupBuyingData.length<=0" class="content-intro"
              style="margin: 60rpx;text-align: center;">
          暂无数据~
        </view>
        <view class="line-split" style="margin: 30rpx 0;"></view>

        <view class="sub-title">抖音</view>
        <view class="flex-row flex-jus-bet flex-ali-cen" style="margin-top: 30rpx;">
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">{{ formatNumber(dyBuyingStatis.number) || 0 }}</view>
            <view class="content-intro" style="margin-top: 10rpx;">数量</view>
          </view>
          <view class="header-field-title-split"></view>
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">{{ formatAmount(dyBuyingStatis.fact_money) || 0 }}</view>
            <view class="content-intro" style="margin-top: 10rpx;">
              金额({{ dyBuyingStatis.fact_money >= 10000 ? '万' : '元' }})
            </view>
          </view>
          <view class="header-field-title-split"></view>
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">{{ formatNumber(dyBuyingStatis.two_number) || 0 }}</view>
            <view class="content-intro" style="margin-top: 10rpx;">二消(单)</view>
          </view>
          <view class="header-field-title-split"></view>
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">{{ formatAmount(dyBuyingStatis.two_fact_money) || 0 }}</view>
            <view class="content-intro" style="margin-top: 10rpx;">
              二消({{ dyBuyingStatis.two_fact_money >= 10000 ? '万' : '元' }})
            </view>
          </view>
        </view>
        <!-- <view class="line-split" style="margin: 30rpx 0;"></view> -->
        <view class="flex-row" style="margin-top: 30rpx;margin-bottom: 30rpx;">
          <view class="content-intro" style="width: 48%;">酒水名称(T5)</view>
          <view class="content-intro" style="width: 25%;">数量/金额</view>
          <view class="content-intro flex-row flex-jus-end" style="width: 27%;">二消/金额</view>
        </view>
        <view>
          <view class="flex-row" style="margin-top: 20rpx;"
                v-for="(item,index) in dyGroupBuyingData.slice(0,5)" :key="index">
            <view class="content-value"
                  style="width: 48%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap">
              {{ index + 1 }}.{{ item.specs_name }}
            </view>
            <view class="content-value" style="width: 25%;">
              {{ formatNumber(item.number) }} / {{ formatNumber(item.fact_money) }}
            </view>
            <view class="content-value flex-row flex-jus-end" style="width: 27%;">
              {{ formatNumber(item.two_number) }} / {{ formatNumber(item.two_fact_money) }}
            </view>
          </view>
        </view>
        <view v-if="dyGroupBuyingData.length<=0" class="content-intro"
              style="margin: 60rpx;text-align: center;">
          暂无数据~
        </view>
        <view class="line-split" style="margin: 30rpx 0;"></view>

        <!-- 二消商品 -->
        <view class="sub-title">二消商品</view>
        <view class="flex-row" style="margin-top: 30rpx;">
          <view class="content-intro" style="width: 50%;">酒水名称(T15)</view>
          <view class="content-intro" style="width: 25%;">数量</view>
          <view class="content-intro flex-row flex-jus-end" style="width: 25%;">实收金额</view>
        </view>
        <view v-if="!twoConsumeDataMore">
          <view class="flex-row" style="margin-top: 20rpx;" v-for="(item,index) in twoConsumeData.slice(0,3)"
                :key="index">
            <view class="content-value"
                  style="width: 50%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap">
              {{ index + 1 }}.{{ item.specs_name }}
            </view>
            <view class="content-value" style="width: 25%;">
              {{ formatNumber(item.number) }}
            </view>
            <view class="content-value flex-row flex-jus-end" style="width: 25%;">
              {{ formatNumber(item.money) }}
            </view>
          </view>
        </view>
        <view v-else>
          <view class="flex-row" style="margin-top: 20rpx;" v-for="(item,index) in twoConsumeData.slice(0,15)"
                :key="index">
            <view class="content-value"
                  style="width: 50%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap">
              {{ index + 1 }}.{{ item.specs_name }}
            </view>
            <view class="content-value" style="width: 25%;">
              {{ formatNumber(item.number) }}
            </view>
            <view class="content-value flex-row flex-jus-end" style="width: 25%;">
              {{ formatNumber(item.money) }}
            </view>
          </view>
        </view>
        <view v-if="twoConsumeData.length<=0" class="content-intro" style="margin: 60rpx;text-align: center;">
          暂无数据~
        </view>
        <view v-if="twoConsumeData.length>3" @click="twoConsumeDataMore = !twoConsumeDataMore"
              class="content-title" style="color: #5697D7;text-align: center;margin: 30rpx 0rpx;">
          {{ twoConsumeDataMore ? '向上收起' : '查看更多' }}
        </view>
      </view>

      <!-- 优惠券统计 -->
      <view class="body-content" style="margin-top: 30rpx;">
        <view class="body-title">优惠券统计</view>
        <!-- 团购商品 -->
        <view class="content-intro"
              style="font-size: 24rpx;height: 40rpx;line-height: 40rpx;color: var(--grey-text);">
          注：优惠券仅包含活动赠送券，充值券不算此列
        </view>
        <view class="flex-row flex-jus-bet flex-ali-cen" style="margin-top: 30rpx;">
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">{{ formatNumber(couponTotal.getNum) || 0 }}</view>
            <view class="content-intro" style="margin-top: 10rpx;">总发放</view>
          </view>
          <view class="header-field-title-split"></view>
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">{{ formatNumber(couponTotal.useNum) || 0 }}</view>
            <view class="content-intro" style="margin-top: 10rpx;">已使用</view>
          </view>
          <view class="header-field-title-split"></view>
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">{{ formatNumber(couponTotal.overtimeNum) || 0 }}</view>
            <view class="content-intro" style="margin-top: 10rpx;">已过期</view>
          </view>
          <view class="header-field-title-split"></view>
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">{{ formatNumber(couponTotal.destroyNum) || 0 }}</view>
            <view class="content-intro" style="margin-top: 10rpx;">已作废</view>
          </view>
        </view>
        <view class="line-split" style="margin: 30rpx 0;"></view>
        <view class="flex-row" style="margin-top: 20rpx;">
          <view class="content-intro" style="width: 40%;">优惠券名称</view>
          <view class="content-intro" style="width: 15%;">已发放</view>
          <view class="content-intro" style="width: 15%;">已使用</view>
          <view class="content-intro" style="width: 15%;">已过期</view>
          <view class="content-intro flex-row flex-jus-end" style="width: 15%;">已作废</view>
        </view>
        <view v-if="!couponListMore">
          <view class="flex-row" style="margin-top: 20rpx;" v-for="(item,index) in couponList.slice(0,3)"
                :key="index">
            <view class="content-value"
                  style="width: 40%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap">
              {{ item.name }}
            </view>
            <view class="content-value" style="width: 15%;text-align: center;">
              {{ formatNumber(item.num_get) }}
            </view>
            <view class="content-value" style="width: 15%;text-align: center;">
              {{ formatNumber(item.num_use) }}
            </view>
            <view class="content-value" style="width: 15%;text-align: center;">
              {{ formatNumber(item.num_overtime) }}
            </view>
            <view class="content-value flex-row flex-jus-end" style="width: 15%;">
              {{ formatNumber(item.num_destroy) }}
            </view>
          </view>
        </view>
        <view v-else>
          <view class="flex-row" style="margin-top: 20rpx;" v-for="(item,index) in couponList" :key="index">
            <view class="content-value"
                  style="width: 40%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap">
              {{ item.name }}
            </view>
            <view class="content-value" style="width: 15%;">{{ formatNumber(item.num_get) }}</view>
            <view class="content-value" style="width: 15%;">{{ formatNumber(item.num_use) }}</view>
            <view class="content-value" style="width: 15%;">{{ formatNumber(item.num_overtime) }}</view>
            <view class="content-value flex-row flex-jus-end" style="width: 15%;">
              {{ formatNumber(item.num_destroy) }}
            </view>
          </view>
        </view>
        <view v-if="couponList.length<=0" class="content-intro" style="margin: 120rpx;text-align: center;">
          暂无数据~
        </view>
        <view v-if="couponList.length>3" @click="couponListMore = !couponListMore" class="content-title"
              style="color: #5697D7;text-align: center;margin-top: 30rpx;margin-bottom: 20rpx;">
          {{ couponListMore ? '向上收起' : '查看更多' }}
        </view>
      </view>

      <!-- 优惠券二消数据 -->
      <view class="body-content" style="margin-top: 30rpx;">

        <view class="body-title">优惠券二消数据</view>
        <view class="flex-row flex-jus-bet flex-ali-cen" style="margin-top: 30rpx;">
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">{{ formatNumber(couponBuyingStatis.number) || 0 }}</view>
            <view class="content-intro" style="margin-top: 10rpx;">数量</view>
          </view>
          <view class="header-field-title-split"></view>
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">{{ formatAmount(couponBuyingStatis.fact_money) || 0 }}</view>
            <view class="content-intro" style="margin-top: 10rpx;">
              金额({{ couponBuyingStatis.fact_money >= 10000 ? '万' : '元' }})
            </view>
          </view>
          <view class="header-field-title-split"></view>
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">{{ formatNumber(couponBuyingStatis.two_number) || 0 }}</view>
            <view class="content-intro" style="margin-top: 10rpx;">二消(单)</view>
          </view>
          <view class="header-field-title-split"></view>
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">{{ formatAmount(couponBuyingStatis.two_fact_money) || 0 }}</view>
            <view class="content-intro" style="margin-top: 10rpx;">
              二消({{ couponBuyingStatis.two_fact_money >= 10000 ? '万' : '元' }})
            </view>
          </view>
        </view>
        <view class="line-split" style="margin: 30rpx 0;"></view>
        <!-- 团购商品 -->
        <view class="body-title"
              style="font-size: 26rpx;height: 50rpx;line-height: 50rpx;color: var(--grey-text);">优惠券商品
        </view>
        <view class="flex-row" style="margin-top: 20rpx;">
          <view class="content-intro" style="width: 50%;">酒水名称</view>
          <view class="content-intro" style="width: 25%;">数量/金额</view>
          <view class="content-intro flex-row flex-jus-end" style="width: 25%;">二消/金额</view>
        </view>
        <view v-if="!couponBuyingMore">
          <view class="flex-row" style="margin-top: 20rpx;"
                v-for="(item,index) in couponBuyingData.slice(0,3)" :key="index">
            <view class="content-value"
                  style="width: 50%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap">
              {{ item.specs_name }}
            </view>
            <view class="content-value" style="width: 25%;">{{ formatNumber(item.number) || 0 }} /
              {{ formatNumber(item.fact_money) }}
            </view>
            <view class="content-value flex-row flex-jus-end" style="width: 25%;">
              {{ formatNumber(item.two_number) || 0 }} / {{ formatNumber(item.two_fact_money) || 0 }}
            </view>
          </view>
        </view>
        <view v-else>
          <view class="flex-row" style="margin-top: 20rpx;" v-for="(item,index) in couponBuyingData"
                :key="index">
            <view class="content-value"
                  style="width: 50%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap">
              {{ item.specs_name }}
            </view>
            <view class="content-value" style="width: 25%;">{{ formatNumber(item.number) || 0 }} /
              {{ formatNumber(item.fact_money) }}
            </view>
            <view class="content-value flex-row flex-jus-end" style="width: 25%;">
              {{ formatNumber(item.two_number) || 0 }} / {{ formatNumber(item.two_fact_money) || 0 }}
            </view>
          </view>
        </view>
        <view v-if="couponBuyingData.length<=0" class="content-intro" style="margin: 60rpx;text-align: center;">
          暂无数据~
        </view>
        <view v-if="couponBuyingData.length>3" @click="couponBuyingMore=!couponBuyingMore" class="content-title"
              style="color: #5697D7;text-align: center;margin: 30rpx 0rpx;">
          {{ couponBuyingMore ? '向上收起' : '查看更多' }}
        </view>


        <!-- 二消商品 -->
        <view class="body-title"
              style="font-size: 26rpx;height: 50rpx;line-height: 50rpx;color: var(--grey-text);margin-top: 30rpx;">
          二消商品
        </view>
        <view class="flex-row" style="margin-top: 20rpx;">
          <view class="content-intro" style="width: 50%;">酒水名称</view>
          <view class="content-intro" style="width: 25%;">数量</view>
          <view class="content-intro flex-row flex-jus-end" style="width: 25%;">实收金额</view>
        </view>
        <view v-if="!couponTowConsumeMore">
          <view class="flex-row" style="margin-top: 20rpx;"
                v-for="(item,index) in couponTowConsumeData.slice(0,3)" :key="index">
            <view class="content-value" style="width: 50%;">{{ item.specs_name }}</view>
            <view class="content-value" style="width: 25%;">{{ formatNumber(item.number) || 0 }}</view>
            <view class="content-value flex-row flex-jus-end" style="width: 25%;">
              {{ formatNumber(item.money) || 0 }}
            </view>
          </view>
        </view>
        <view v-else>
          <view class="flex-row" style="margin-top: 20rpx;" v-for="(item,index) in couponTowConsumeData"
                :key="index">
            <view class="content-value" style="width: 50%;">{{ item.specs_name }}</view>
            <view class="content-value" style="width: 25%;">{{ formatNumber(item.number) || 0 }}</view>
            <view class="content-value flex-row flex-jus-end" style="width: 25%;">
              {{ formatNumber(item.money) || 0 }}
            </view>
          </view>
        </view>
        <view v-if="couponTowConsumeData.length<=0" class="content-intro"
              style="margin: 60rpx;text-align: center;">
          暂无数据~
        </view>
        <view v-if="couponTowConsumeData.length>3" @click="couponTowConsumeMore=!couponTowConsumeMore"
              class="content-title" style="color: #5697D7;text-align: center;margin-top: 30rpx;">
          {{ couponTowConsumeMore ? '向上收起' : '查看更多' }}
        </view>
      </view>

      <!-- 近期营业 -->
      <view class="body-content" style="margin-top: 30rpx;">
        <view class="body-title">近期营业</view>
        <!-- 默认近7天 -->
        <uni-datetime-picker v-model="businessTime" type="daterange"
                             @change="chooseDateSure($event,'businessTime')" :end="maxDate()">
          <view class="flex-date">
            <view class="date-display-custom">
              <view class="date-display-custom-date">{{ businessTime[0] }}</view>
              <uni-icons type="down" size="14" color="var(--white-text)"></uni-icons>
            </view>
            <view class="date-display-center">至</view>
            <view class="date-display-custom">
              <view class="date-display-custom-date">{{ businessTime[1] }}</view>
              <uni-icons type="down" size="14" color="var(--white-text)"></uni-icons>
            </view>
          </view>
        </uni-datetime-picker>
        <!-- 对比时间段 -->
        <view style="margin-top: 20rpx;margin-bottom: 10rpx;">
          <view class="flex-row flex-ali-cen flex-jus-cen">
            <view class="content-intro">同期：{{ businessContrasTime[0] }} / {{ businessContrasTime[1] }}
            </view>
          </view>
        </view>
        <view class="charts-box" style="height: 100%;width: 100%;">
          <qiun-data-charts :disableScroll="true" :background="backColor" type="mix" :ontouch="true"
                            :opts="businessTrendOpts" :chartData="businessTrendData"/>
        </view>
      </view>


      <!-- 营业占比 -->
      <view class="body-content" style="margin-top: 30rpx;">
        <view class="body-title">营业占比</view>
        <!-- 默认近7天 -->
        <view style="margin-bottom: 20rpx;">
          <uni-datetime-picker v-model="businessRatioTime"
                               @change="chooseDateSure($event,'businessRatioTime')" type="daterange" :end="maxDate()">
            <view class="flex-date">
              <view class="date-display-custom">
                <view class="date-display-custom-date">{{ businessRatioTime[0] }}</view>
                <uni-icons type="down" size="14" color="var(--white-text)"></uni-icons>
              </view>
              <view class="date-display-center">至</view>
              <view class="date-display-custom">
                <view class="date-display-custom-date">{{ businessRatioTime[1] }}</view>
                <uni-icons type="down" size="14" color="var(--white-text)"></uni-icons>
              </view>
            </view>
          </uni-datetime-picker>
        </view>
        <view class="charts-box" style="height: 100%;width: 100%;">
          <qiun-data-charts :disableScroll="true" :background="backColor" type="column" :ontouch="true"
                            :opts="businessRatioOpts" :chartData="businessRatioData"/>
        </view>
        <view class="flex-row flex-jus-bet flex-ali-cen" style="margin-top: 30rpx;">
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">
              {{ formatAmount(businessProporTionTotal.businessMoney) || 0 }}
            </view>
            <view class="content-intro" style="margin-top: 10rpx;">
              总营业({{ businessProporTionTotal.businessMoney >= 10000 ? '万' : '元' }})
            </view>
          </view>
          <view class="header-field-title-split"></view>
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">
              {{ formatAmount(businessProporTionTotal.businessMoneyYes) || 0 }} /
              {{ businessProporTionTotal.businessMoneyYesPro }}%
            </view>
            <view class="content-intro" style="margin-top: 10rpx;">
              主营({{ businessProporTionTotal.businessMoneyYes >= 10000 ? '万' : '元' }}) / 占比
            </view>
          </view>
          <view class="header-field-title-split"></view>
          <view class="flex-col flex-jus-cen flex-1 flex-ali-cen" style="display: flex;">
            <view class="content-value">{{ formatAmount(businessProporTionTotal.businessMoneyNo) || 0 }} /
              {{ businessProporTionTotal.businessMoneyNoPro }}%
            </view>
            <view class="content-intro" style="margin-top: 10rpx;">
              非营({{ businessProporTionTotal.businessMoneyNo >= 10000 ? '万' : '元' }}) / 占比
            </view>
          </view>
        </view>
        <view class="line-split" style="margin: 30rpx 0;"></view>
        <!-- 主营 -->
        <view class="body-title"
              style="font-size: 26rpx;height: 50rpx;line-height: 50rpx;color: var(--grey-text);margin-top: 20rpx;">
          主营
        </view>
        <view class="flex-row" style="margin-top: 20rpx;">
          <view class="content-intro" style="width: 50%;">分类名称</view>
          <view class="content-intro" style="width: 25%;">实际收入</view>
          <view class="content-intro flex-row flex-jus-end" style="width: 25%;">占比%</view>
        </view>
        <view v-if="!businessRatioTypeYesMore">
          <view class="flex-row" style="margin-top: 20rpx;"
                v-for="(item,index) in businessRatioTypeYes.slice(0,3)" :key="index">
            <view class="content-value" style="width: 50%;">{{ item.category_name }}</view>
            <view class="content-value" style="width: 25%;">{{ formatNumber(item.money) }}</view>
            <view class="content-value flex-row flex-jus-end" style="width: 25%;">
              {{ formatNumber(item.rate) }}%
            </view>
          </view>
        </view>
        <view v-else>
          <view class="flex-row" style="margin-top: 20rpx;" v-for="(item,index) in businessRatioTypeYes"
                :key="index">
            <view class="content-value" style="width: 50%;">{{ item.category_name }}</view>
            <view class="content-value" style="width: 25%;">{{ formatNumber(item.money) }}</view>
            <view class="content-value flex-row flex-jus-end" style="width: 25%;">
              {{ formatNumber(item.rate) }}%
            </view>
          </view>
        </view>
        <view v-if="businessRatioTypeYes.length<=0" class="content-intro"
              style="margin: 100rpx;text-align: center;">
          暂无数据~
        </view>
        <view v-if="businessRatioTypeYes.length>3" class="content-title"
              @click="businessRatioTypeYesMore = !businessRatioTypeYesMore"
              style="color: #5697D7;text-align: center;margin-top: 30rpx;">
          {{ businessRatioTypeYesMore ? '向上收起' : '查看更多' }}
        </view>

        <!-- 非营 -->
        <view class="body-title"
              style="font-size: 26rpx;height: 50rpx;line-height: 50rpx;color: var(--grey-text);margin-top: 20rpx;">
          非营
        </view>

        <view class="flex-row" style="margin-top: 20rpx;">
          <view class="content-intro" style="width: 50%;">分类名称</view>
          <view class="content-intro" style="width: 25%;">实际收入</view>
          <view class="content-intro flex-row flex-jus-end" style="width: 25%;">占比%</view>
        </view>
        <view v-if="!businessRatioTypeNoMore">
          <view class="flex-row" style="margin-top: 20rpx;"
                v-for="(item,index) in businessRatioTypeNo.slice(0,3)" :key="index">
            <view class="content-value" style="width: 50%;">{{ item.category_name }}</view>
            <view class="content-value" style="width: 25%;">{{ formatNumber(item.money) }}</view>
            <view class="content-value flex-row flex-jus-end" style="width: 25%;">
              {{ formatNumber(item.rate) }}%
            </view>
          </view>
        </view>
        <view v-else>
          <view class="flex-row" style="margin-top: 20rpx;" v-for="(item,index) in businessRatioTypeNo"
                :key="index">
            <view class="content-value" style="width: 50%;">{{ item.category_name }}</view>
            <view class="content-value" style="width: 25%;">{{ formatNumber(item.money) }}</view>
            <view class="content-value flex-row flex-jus-end" style="width: 25%;">
              {{ formatNumber(item.rate) }}%
            </view>
          </view>
        </view>
        <view v-if="businessRatioTypeNo.length<=0" class="content-intro"
              style="margin: 100rpx;text-align: center;">
          暂无数据~
        </view>
        <view v-if="businessRatioTypeNo.length>3" class="content-title"
              @click="businessRatioTypeNoMore = !businessRatioTypeNoMore"
              style="color: #5697D7;text-align: center;margin-top: 30rpx;">
          {{ businessRatioTypeNoMore ? '向上收起' : '查看更多' }}
        </view>
      </view>

      <!-- 均消走势 -->
      <view class="body-content" style="margin-top: 30rpx;">
        <view class="body-title">均消走势</view>
        <!-- 默认近7天 -->
        <uni-datetime-picker v-model="roomAvgTime" type="daterange"
                             @change="chooseDateSure($event,'roomAvgTime')" :end="maxDate()">
          <view class="flex-date">
            <view class="date-display-custom">
              <view class="date-display-custom-date">{{ roomAvgTime[0] }}</view>
              <uni-icons type="down" size="14" color="var(--white-text)"></uni-icons>
            </view>
            <view class="date-display-center">至</view>
            <view class="date-display-custom">
              <view class="date-display-custom-date">{{ roomAvgTime[1] }}</view>
              <uni-icons type="down" size="14" color="var(--white-text)"></uni-icons>
            </view>
          </view>
        </uni-datetime-picker>
        <!-- 对比时间段 -->
        <view style="margin-top: 20rpx;margin-bottom: 20rpx;">
          <view class="flex-row flex-ali-cen flex-jus-cen">
            <view class="content-intro">同期：{{ roomAvgContrasTime[0] }} / {{ roomAvgContrasTime[1] }}
            </view>
          </view>
        </view>

        <view class="charts-box" style="height: 100%;width: 100%;">
          <qiun-data-charts :disableScroll="true" type="area" :opts="roomAvgOpts" :background="backColor"
                            :ontouch="true" :chartData="roomAvgData"/>
        </view>
      </view>

      <!-- 优惠券使用 -->
      <view class="body-content" style="margin-top: 30rpx;">
        <view class="body-title">优惠券使用量</view>
        <!-- 默认近7天 -->
        <uni-datetime-picker v-model="couponUseTime" type="daterange" :end="maxDate()"
                             @change="chooseDateSure($event,'couponUseTime')">
          <view class="flex-date">
            <view class="date-display-custom">
              <view class="date-display-custom-date">{{ couponUseTime[0] }}</view>
              <uni-icons type="down" size="14" color="var(--white-text)"></uni-icons>
            </view>
            <view class="date-display-center">至</view>
            <view class="date-display-custom">
              <view class="date-display-custom-date">{{ couponUseTime[1] }}</view>
              <uni-icons type="down" size="14" color="var(--white-text)"></uni-icons>
            </view>
          </view>
        </uni-datetime-picker>
        <!-- 对比时间段 -->
        <view style="margin-top: 20rpx;margin-bottom: 20rpx;">
          <view class="flex-row flex-ali-cen flex-jus-cen">
            <view class="content-intro">同期：{{ couponUseContrasTime[0] }} / {{ couponUseContrasTime[1] }}
            </view>
          </view>
        </view>

        <view class="charts-box" style="height: 100%;width: 100%;">
          <qiun-data-charts :disableScroll="true" :background="backColor" :ontouch="true" type="area"
                            :opts="couponUseOpts" :chartData="couponUseData"/>
        </view>
      </view>

    </view>
  </scroll-view>
  <custom-loading-vue ref="loading" @click="closeLoad()"></custom-loading-vue>
</template>

<script>
import dayjs from "dayjs"
import customRangeAnaVue from '@/components/customRangeAna.vue'
import customLoadingVue from '@/components/customLoading.vue'

export default {
  components: {
    customRangeAnaVue,
    customLoadingVue
  },
  watch: {
    betweenTime(newVal, oldVal) {
      if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
        this.resetPages()
        this.goodsTypeMore = false
        this.twoConsumeDataMore = false
        this.businessMore = false
        this.couponBuyingMore = false
        this.couponTowConsumeMore = false
        this.groupBuyingStatis()
        this.getBusinessData()
        this.getGoodsTypeData()
        this.getMtGroupBuying()
        this.getDyGroupBuying()
        this.twoConsume()
        this.couponStatis()
        this.couponBuying()
        this.getCouponTowConsume()
      }
    },
    businessTime(newVal, oldVal) {
      if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
        this.getBusinessTrendData()
      }
    },
    businessRatioTime(newVal, oldVal) {
      if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
        this.businessRatioTypeYesMore = false
        this.businessRatioTypeNoMore = false
        this.getBusinessRatioData()
        this.getBusinessRatioType()
      }
    },
    roomAvgTime(newVal, oldVal) {
      if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
        this.getRoomAvgData()
      }
    },
    couponUseTime(newVal, oldVal) {
      if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
        this.getCouponUseData()
      }
    },
  },
  data() {
    return {
      top: 0,
      old: {
        scrollTop: 0
      },
      scrollTop: 0,
      scrollHeight: 0,
      shopIndex: this.$commonJs.getChooseShopIndex(),
      shopList: this.$commonJs.getShopList(),
      backColor: '',
      mtGroupBuyingData: [],
      dyGroupBuyingData: [],
      twoConsumeData: [],
      twoConsumeDataMore: false,
      couponList: [],
      couponListMore: false,
      couponBuyingData: [],
      couponBuyingMore: [],
      couponTowConsumeData: [],
      couponTowConsumeMore: false,
      couponTotal: {
        destroyNum: 0,
        getNum: 0,
        overtimeNum: 0,
        useNum: 0,
      },
      // 统一日期监听
      betweenTime: [],
      goodsTypeDataHeight: '100%',
      // 营业概况数据
      businessData: {
        all_money: 0,
        business_money: 0,
        avg_room_money: 0,
        consumption_duration: 0,
        dy_two_consum: 0,
        dy_two_consum_rate: 0,
        dy_write_money: 0,
        dy_write_number: 0,
        mt_two_consum: 0,
        mt_two_consum_rate: 0,
        mt_write_money: 0,
        mt_write_number: 0,
        no_reach_number: 0,
        open_rate: 0,
        open_room_all_number: 0,
        reach_number: 0,
        receipts_charge_money: 0,
        rock_number: 0,
        rock_rate: 0,
        rock_rmoney: 0,
        sm_number: 0,
        sm_money: 0,
        sm_two_money_rate: 0
      },
      // 营业概况加载更多状态
      businessMore: false,
      // 营业走势日期
      businessTime: [],
      // 营业走势对比日期
      businessContrasTime: [],
      // 营业占比日期
      businessRatioTime: [],
      // 均消走势日期
      roomAvgTime: [],
      // 均消走势对比日期
      roomAvgContrasTime: [],
      // 优惠券使用日期
      couponUseTime: [],
      // 优惠券使用对比日期
      couponUseContrasTime: [],
      // 分类收入数据
      goodsTypeData: {},
      goodsTypeMore: false,
      // 营业走势数据
      businessTrendData: {},
      // 营业占比数据
      businessRatioData: {},
      businessRatioTypeYes: [],
      businessRatioTypeYesMore: false,
      businessRatioTypeNo: [],
      businessRatioTypeNoMore: false,
      // 均消走势数据
      roomAvgData: {},
      // 优惠券使用数据
      couponUseData: {},
      // 分类收入图表配置
      goodsTypeDataOpts: {
        dataLabel: true,
        legend: {
          position: "bottom",
          show: false
        },
        extra: {
          bar: {
            type: "group",
            width: 30,
            categoryGap: 5
          }
        },
        xAxis: {
          axisLine: true,
          disableGrid: true
        },
        yAxis: {},
        tooltip: {
          showBox: true,
        }
      },
      // 近期营业图表配置
      businessTrendOpts: {
        enableScroll: true,
        dataLabel: false,
        legend: {
          position: "bottom",
        },
        extra: {
          mix: {
            column: {
              width: 20,
              seriesGap: 0,
              categoryGap: 3,
              barBorderCircle: false
            },
          }
        },
        xAxis: {
          // rotateLabel: true,
          // rotateAngle: 60,
          axisLine: true,
          itemCount: 7,
          fontSize: 12,
        },
        yAxis: {
          showTitle: true,
          disabled: false,
          disableGrid: false,
          data: [{
            position: "left",
            title: "营业额(万)",
            min: 0
          },
            {
              position: "right",
              title: "翻台率(%)",
              textAlign: "left",
              min: 0
            }
          ]
        },
        tooltip: {
          showBox: true,
        }
      },
      // 营业占比图表配置
      businessRatioOpts: {
        enableScroll: true,
        dataLabel: true,
        fontSize: 12,
        legend: {
          position: "bottom"
        },
        extra: {
          column: {
            width: 30,
            seriesGap: 0,
            type: "stack",
            categoryGap: 5,
            barBorderCircle: false
          }
        },
        xAxis: {
          axisLine: true,
          itemCount: 7,
        },
        yAxis: {
          disabled: false,
          disableGrid: true,
          data: [{
            min: 0,
            unit: "万",
          }],
        },
        tooltip: {
          showBox: true,
        }
      },
      // 均消走势图表配置
      roomAvgOpts: {
        enableScroll: true,
        dataLabel: false,
        legend: {
          position: "bottom"
        },
        extra: {
          area: {
            type: "curve",
          }
        },
        xAxis: {
          boundaryGap: 'justify',
          axisLine: true,
          itemCount: 7,
          fontSize: 12,
        },
        yAxis: {
          showTitle: true,
          disabled: false,
          disableGrid: false,
          data: [{
            position: "left",
            title: "桌均消(元)",
            min: 0
          },]
        }
      },
      // 优惠券图表配置
      couponUseOpts: {
        enableScroll: true,
        dataLabel: false,
        legend: {
          position: "bottom"
        },
        extra: {
          area: {
            type: "curve",
          }
        },
        xAxis: {
          boundaryGap: 'justify',
          itemCount: 7,
          scrollShow: false,
          fontSize: 12,
        },
        yAxis: {
          showTitle: true,
          disabled: false,
          disableGrid: false,
          data: [{
            position: "left",
            title: "使用数量(张)",
            min: 0
          },]
        }
      },
      // 营业走势图表配置
      trendMonthOpts: {
        enableScroll: true,
        dataLabel: true,
        fontSize: 12,
        legend: {
          position: "bottom",
          show: false
        },
        extra: {
          column: {
            type: "group",
            width: 30,
            categoryGap: 5,
          }
        },
        xAxis: {
          itemCount: 7,
          scrollShow: false,
          fontSize: 12,
          disableGrid: true
        },
        yAxis: {
          disabled: false,
          disableGrid: true,
          data: [{
            min: 0,
            type: "value",
            axisLine: true,
            calibration: false,
            unit: "万",
            fontSize: 12
          }],
        },
        tooltip: {
          showBox: true,
        }
      },
      // 营业走势数据
      trendMonthData: {},
      buyingStatis: {
        fact_money: 0,
        number: 0,
        two_fact_money: 0,
        two_number: 0
      }, // 团购汇总
      dyBuyingStatis: {
        fact_money: 0,
        number: 0,
        two_fact_money: 0,
        two_number: 0
      }, // 抖音汇总
      mtBuyingStatis: {
        fact_money: 0,
        number: 0,
        two_fact_money: 0,
        two_number: 0
      }, //美团汇总
      couponBuyingStatis: {
        fact_money: 0,
        number: 0,
        two_fact_money: 0,
        two_number: 0
      }, //优惠券二消汇总
      businessProporTionTotal: {
        businessMoney: 0,
        businessMoneyYes: 0,
        businessMoneyYesPro: 0,
        businessMoneyNo: 0,
        businessMoneyNoPro: 0
      }, //营业占比汇总
    }
  },
  onLoad() {
    this.defaultDate()
    this.contrastDate()
    this.getBusinessTrendMonth()
    const system = uni.getSystemInfo()
    this.colorInit(system)
  },
  mounted() {
    const query = uni.createSelectorQuery().in(this)
    const self = this
    query.select(".customHeader")
        .boundingClientRect((data) => {
          self.scrollTop = data.height + 'px'
          let topHeight = data.height + 'px'
          self.scrollHeight = `calc(100vh - ${topHeight})`
        })
        .exec();
  },
  methods: {
    /**
     * 滚动监听
     * @param e
     */
    scroll(e){
      this.old.scrollTop = e.detail.scrollTop
    },

    /**
     * 置顶
     */
    resetPages(){
      this.top = this.old.scrollTop
      this.$nextTick(()=>{
        this.top = 0
      })
    },

    /**
     * 门店切换
     * @param e
     */
    bindPickerChangeShop(e) {
      const self = this
      if (e.detail.value >= 0 && e.detail.value != self.$commonJs.systemConfig.shopIndex) {
        self.shopIndex = e.detail.value
        self.$commonJs.systemConfig.shopIndex = e.detail.value
        self.$commonJs.setStorage(
            'shopIndex',
            e.detail.value,
            function () {
              self.$commonJs.logger.debug('设置门店成功！')
            }
        )
        this.resetPages()
        // 切换门店后进行请求操作
        this.defaultDate()
        this.contrastDate()
        this.getBusinessTrendMonth()
        this.goodsTypeMore = false
        this.twoConsumeDataMore = false
        this.businessMore = false
        this.couponBuyingMore = false
        this.couponTowConsumeMore = false
        this.getBusinessTrendData()
        this.groupBuyingStatis()
        this.getBusinessData()
        this.getGoodsTypeData()
        this.getMtGroupBuying()
        this.getDyGroupBuying()
        this.twoConsume()
        this.couponStatis()
        this.couponBuying()
        this.getCouponTowConsume()
        this.businessRatioTypeYesMore = false
        this.businessRatioTypeNoMore = false
        this.getBusinessRatioData()
        this.getBusinessRatioType()
        this.getRoomAvgData()
        this.getCouponUseData()
      }
    },

    /**
     * 颜色选择
     * @param system
     * @return {Promise<void>}
     */
    async colorInit(system) {
      system = await system
      if (system.hasOwnProperty('theme')) {
        this.backColor = system.theme == 'dark' ? '#232323' : '#feffff'
        return
      }
      this.backColor = '#feffff'
    },

    /**
     * 优惠券数据
     */
    couponBuying() {
      const self = this
      const params = {
        begin_date: this.betweenTime[0] + ' 12:00:00',
        end_date: this.betweenTime[1] + ' 12:00:00'
      }
      this.$commonJs.queryCache('/app/analyse/couponBuying', params, {
        before() {
        },
        success(res) {
          const {
            code,
            data,
            msg,
          } = res
          try {
            self.couponBuyingData = data
            if (data.length > 0) {
              self.couponBuyingStatis.number = data.reduce((acc, item) => acc + (parseFloat(item.number) ||
                  0), 0)
              self.couponBuyingStatis.fact_money = data.reduce((acc, item) => acc + (parseFloat(item
                      .fact_money) || 0),
                  0)
              self.couponBuyingStatis.two_number = data.reduce((acc, item) => acc + (parseFloat(item
                      .two_number) || 0),
                  0)
              self.couponBuyingStatis.two_fact_money = data.reduce((acc, item) => acc + (parseFloat(item
                  .two_fact_money) || 0), 0)
            }
          } catch (error) {
            self.$commonJs.showMessage(error)
          }
        },
        fail(err) {
          self.$commonJs.logger.debug(err, 'error')
        }
      }, {"X-Merchant-ID": self.shopList[self.shopIndex].shop_id})
    },

    /**
     * 优惠券二消数据
     */
    getCouponTowConsume() {
      const self = this
      const params = {
        begin_date: this.betweenTime[0] + ' 12:00:00',
        end_date: this.betweenTime[1] + ' 12:00:00'
      }
      this.$commonJs.queryCache('/app/analyse/couponTowConsume', params, {
        before() {
        },
        success(res) {
          const {
            code,
            data,
            msg,
          } = res
          try {
            self.couponTowConsumeData = data
          } catch (error) {
            self.$commonJs.showMessage(error)
          }
        },
        fail(err) {
          self.$commonJs.logger.debug(err, 'error')
        }
      }, {"X-Merchant-ID": self.shopList[self.shopIndex].shop_id})
    },

    /**
     * 优惠券统计
     */
    couponStatis() {
      const self = this
      const params = {
        begin_date: this.betweenTime[0] + ' 12:00:00',
        end_date: this.betweenTime[1] + ' 12:00:00'
      }
      this.$commonJs.queryCache('/app/analyse/couponStatis', params, {
        before() {
        },
        success(res) {
          const {
            code,
            data,
            msg,
          } = res
          try {
            if (data.hasOwnProperty('list')) {
              self.couponList = data.list
            }
            if (data.hasOwnProperty('statis')) {
              self.couponTotal = data.statis
            }
          } catch (error) {
            self.$commonJs.showMessage(error)
          }
        },
        fail(err) {
          self.$commonJs.logger.debug(err, 'error')
        }
      }, {"X-Merchant-ID": self.shopList[self.shopIndex].shop_id})
    },

    /**
     * 团购汇总数据
     */
    groupBuyingStatis() {
      const self = this
      const params = {
        begin_date: this.betweenTime[0] + ' 12:00:00',
        end_date: this.betweenTime[1] + ' 12:00:00'
      }
      this.$commonJs.queryCache('/app/analyse/groupBuyingStatis', params, {
        before() {
        },
        success(res) {
          const {
            code,
            data,
            msg,
          } = res
          try {
            if (data.hasOwnProperty('group')) {
              self.buyingStatis = data.group
            }
            if (data.hasOwnProperty('dyGroup')) {
              self.dyBuyingStatis = data.dyGroup
            }
            if (data.hasOwnProperty('mtGroup')) {
              self.mtBuyingStatis = data.mtGroup
            }
          } catch (error) {
            self.$commonJs.showMessage(error)
          }
        },
        fail(err) {
          self.$commonJs.logger.debug(err, 'error')
        }
      }, {"X-Merchant-ID": self.shopList[self.shopIndex].shop_id})
    },

    /**
     * 美团团购
     */
    getMtGroupBuying() {
      const self = this
      const params = {
        begin_date: this.betweenTime[0] + ' 12:00:00',
        end_date: this.betweenTime[1] + ' 12:00:00'
      }
      this.$commonJs.queryCache('/app/analyse/mtGroupBuying', params, {
        before() {
        },
        success(res) {
          const {
            code,
            data,
            msg,
          } = res
          try {
            self.mtGroupBuyingData = data
          } catch (error) {
            self.$commonJs.showMessage(error)
          }
        },
        fail(err) {
          self.$commonJs.logger.debug(err, 'error')
        }
      }, {"X-Merchant-ID": self.shopList[self.shopIndex].shop_id})
    },

    /**
     * 抖音团购
     */
    getDyGroupBuying() {
      const self = this
      const params = {
        begin_date: this.betweenTime[0] + ' 12:00:00',
        end_date: this.betweenTime[1] + ' 12:00:00'
      }
      this.$commonJs.queryCache('/app/analyse/dyGroupBuying', params, {
        before() {
        },
        success(res) {
          const {
            code,
            data,
            msg,
          } = res
          try {
            self.dyGroupBuyingData = data
          } catch (error) {
            self.$commonJs.showMessage(error)
          }
        },
        fail(err) {
          self.$commonJs.logger.debug(err, 'error')
        }
      }, {"X-Merchant-ID": self.shopList[self.shopIndex].shop_id})
    },

    /**
     * 团购二消数据
     */
    twoConsume() {
      const self = this
      const params = {
        begin_date: this.betweenTime[0] + ' 12:00:00',
        end_date: this.betweenTime[1] + ' 12:00:00'
      }
      this.$commonJs.queryCache('/app/analyse/twoConsume', params, {
        before() {
        },
        success(res) {
          const {
            code,
            data,
            msg,
          } = res
          try {
            self.twoConsumeData = data
          } catch (error) {
            self.$commonJs.showMessage(error)
          }
        },
        fail(err) {
          self.$commonJs.logger.debug(err, 'error')
        }
      }, {"X-Merchant-ID": self.shopList[self.shopIndex].shop_id})
    },

    /**
     * 营业数据概况
     */
    getBusinessData() {
      const self = this
      const params = {
        begin_date: this.betweenTime[0] + ' 12:00:00',
        end_date: this.betweenTime[1] + ' 12:00:00'
      }
      this.$commonJs.queryCache('/app/analyse/businessAnalysis', params, {
        before() {
          self.$refs.loading.show('加载中...')
        },
        success(res) {
          const {
            code,
            data,
            msg,
          } = res
          try {
            self.businessData = data[0]
          } catch (error) {
            self.$commonJs.showMessage(error)
          }
        },
        fail(err) {
          self.$commonJs.logger.debug(err, 'error')
        },
        complete() {
          self.$refs.loading.hide()
        }
      }, {"X-Merchant-ID": self.shopList[self.shopIndex].shop_id})
    },

    /**
     * 格式化处理
     * @param money
     * @returns {string|*}
     */
    formatNumber(money) {
      // 判断是否为整数（即小数部分是否为 0）
      if (money % 1 === 0) {
        return Number(money).toString()
      } else {
        return Number(money).toFixed(2)
      }
    },

    /**
     * 格式化金额
     * @param amount
     * @return {string}
     */
    formatAmount(amount) {
      if (amount >= 10000) {
        return (amount / 10000).toFixed(2);
      } else {
        // 格式化为千分位
        if (amount % 1 === 0) {
          return Number(amount).toString()
        } else {
          return Number(amount).toFixed(2)
        }

      }
    },

    handleBetweenTime(timeRange) {
      this.betweenTime = timeRange
    },

    truncateString(str, num) {
      if (str.length > num) {
        // return str.slice(0, num > 6 ? num - 3 : num) + '...';
        return str.slice(0, num > 6 ? num - 3 : num);
      }
      return str;
    },

    /**
     * 分类收入展开
     * @param status
     */
    goodsTypeMoreLoad(status) {
      this.goodsTypeMore = !this.goodsTypeMore
      this.getGoodsTypeData(status)
    },

    /**
     * 分类收入
     * @param status
     */
    getGoodsTypeData(status = 'default') {
      const self = this
      const params = {
        begin_date: this.betweenTime[0] + ' 12:00:00',
        end_date: this.betweenTime[1] + ' 12:00:00'
      }
      this.$commonJs.queryCache('/app/analyse/categoryStatis', params, {
        before() {
        },
        success(res) {
          const {
            code,
            data,
            msg,
          } = res
          try {
            let typeArr = data.map((item) => {
              item.category_name = self.truncateString(item.category_name, 5)
              return item.category_name
            })
            let typeMoney = data.map((item) => {
              return (item.money / 10000).toFixed(2)
            })
            let response = {
              categories: status === 'default' ? typeArr.slice(0, 5) : typeArr.slice(0, 10),
              series: [{
                name: '实收金额(单位：万)',
                data: status === 'default' ? typeMoney.slice(0, 5) : typeMoney.slice(0, 10),
                color: '#5697FB',
              }]
            };
            self.goodsTypeDataHeight = status === 'default' ? typeMoney.slice(0, 5).length * 98 + 'rpx' :
                typeMoney.slice(0, 10).length * 98 + 'rpx'
            self.goodsTypeData = JSON.parse(JSON.stringify(response));
          } catch (error) {
            self.$commonJs.showMessage(error)
          }
        },
        fail(err) {
          self.$commonJs.logger.debug(err, 'error')
        }
      }, {"X-Merchant-ID": self.shopList[self.shopIndex].shop_id})
    },

    /**
     * 月营业走势图表
     * @return {Promise<void>}
     */
    getBusinessTrendMonth() {
      const self = this
      const params = {}
      this.$commonJs.queryCache('/app/analyse/recentlyOneYearTrend', params, {
        before() {
        },
        success(res) {
          try {
            const {
              code,
              data,
              msg,
              server_ip
            } = res
            let businessMoney = data.businessMoney.map((item) => {
              return (item / 10000).toFixed(0)
            })
            let result = {
              categories: data.month,
              series: [{
                name: "营业额走势",
                type: "column",
                color: '#5697FB',
                data: businessMoney
              }]
            };
            self.trendMonthData = JSON.parse(JSON.stringify(result));
          } catch (error) {
            //TODO handle the exception
            self.$commonJs.showMessage(error)
          }
        },
        fail(err) {
          self.$commonJs.logger.debug(err, 'error')
        }
      }, {"X-Merchant-ID": self.shopList[self.shopIndex].shop_id})
    },

    /**
     * 近期营业概况
     * @return {Promise<void>}
     */
    getBusinessTrendData() {
      const self = this
      const params = {
        begin_date: this.businessTime[0] + ' 12:00:00',
        end_date: this.businessTime[1] + ' 12:00:00',
        compare_begin_date: this.businessContrasTime[0] + ' 12:00:00',
        compare_end_date: this.businessContrasTime[1] + ' 12:00:00'
      }
      this.$commonJs.queryCache('/app/analyse/businessTrend', params, {
        before() {
        },
        success(res) {
          const {
            code,
            data,
            msg,
          } = res
          try {
            let businessMoney = data.businessMoney.map((item) => {
              return (item / 10000).toFixed(2)
            })
            let compareBusinessMoney = data.compareBusinessMoney.map((item) => {
              return (item / 10000).toFixed(2)
            })
            let result = {
              categories: data.date.map((item, index) => `${item}/${data.compareDate[index]}`),
              series: [{
                name: "营业",
                type: "column",
                color: '#5697FB',
                data: businessMoney,
                index: 0,
                dataLabel: true
              },
                {
                  name: "同期",
                  type: "column",
                  color: "#FF9900",
                  data: compareBusinessMoney,
                  index: 0,
                  dataLabel: true
                },
                {
                  name: "翻台",
                  type: "line",
                  style: "curve",
                  color: "#5697FB",
                  data: data.rockRate,
                  index: 1, // 对应右侧 Y 轴
                  dataLabel: false
                },
                {
                  name: "同期",
                  type: "line",
                  style: "curve",
                  color: "#FF9900",
                  data: data.compareRockRate,
                  index: 1, // 对应右侧 Y 轴
                  dataLabel: false
                }
              ]
            };
            self.businessTrendData = JSON.parse(JSON.stringify(result));
          } catch (error) {
            //TODO handle the exception
            self.$commonJs.showMessage(error)
          }
        },
        fail(err) {
          self.$commonJs.logger.debug(err, 'error')
        }
      }, {"X-Merchant-ID": self.shopList[self.shopIndex].shop_id})
    },

    /**
     * 营业占比
     * @return {Promise<void>}
     */
    getBusinessRatioData() {
      const self = this
      const params = {
        begin_date: this.businessRatioTime[0] + ' 12:00:00',
        end_date: this.businessRatioTime[1] + ' 12:00:00'
      }
      this.$commonJs.queryCache('/app/analyse/businessProportion', params, {
        before() {
        },
        success(res) {
          const {
            code,
            data,
            msg,
          } = res
          try {
            let businessMoneyYes = data.businessYesMoney.map((item) => {
              return Number((item / 10000).toFixed(2))
            })
            let businessMoneyNo = data.businessNoMoney.map((item) => {
              return Number((item / 10000).toFixed(2))
            })
            let result = {
              categories: data.date,
              series: [{
                name: "主营",
                color: '#5697FB',
                data: businessMoneyYes
              },
                {
                  name: "非营",
                  color: '#FF9900',
                  data: businessMoneyNo
                },
              ]
            };
            self.businessRatioData = JSON.parse(JSON.stringify(result));
            self.businessProporTionTotal.businessMoney = data.businessMoney.reduce((acc, num) => acc +
                parseFloat(num), 0)
            self.businessProporTionTotal.businessMoneyYes = data.businessYesMoney.reduce((acc, num) => acc +
                parseFloat(num), 0)
            self.businessProporTionTotal.businessMoneyNo = data.businessNoMoney.reduce((acc, num) => acc +
                parseFloat(num), 0)
            self.businessProporTionTotal.businessMoneyYesPro = self.businessProporTionTotal.businessMoney ==
            0 ? 0 :
                Math.round((self.businessProporTionTotal.businessMoneyYes / self.businessProporTionTotal
                    .businessMoney) * 10000) / 100

            self.businessProporTionTotal.businessMoneyNoPro = self.businessProporTionTotal.businessMoney ==
            0 ? 0 :
                Math.round((self.businessProporTionTotal.businessMoneyNo / self.businessProporTionTotal
                    .businessMoney) * 10000) / 100
          } catch (error) {
            self.$commonJs.showMessage(error)
          }
        },
        fail(err) {
          self.$commonJs.logger.debug(err, 'error')
        }
      }, {"X-Merchant-ID": self.shopList[self.shopIndex].shop_id})
    },

    /**
     * 主营非营收入
     * @return {Promise<void>}
     */
    getBusinessRatioType() {
      const self = this
      const params = {
        begin_date: this.businessRatioTime[0] + ' 12:00:00',
        end_date: this.businessRatioTime[1] + ' 12:00:00'
      }
      this.$commonJs.queryCache('/app/analyse/businessRevenue', params, {
        before() {
        },
        success(res) {
          const {
            code,
            data,
            msg,
          } = res
          try {
            if (data.hasOwnProperty('yesMoney')) {
              self.businessRatioTypeYes = data.yesMoney
            }
            if (data.hasOwnProperty('noMoney')) {
              self.businessRatioTypeNo = data.noMoney
            }
          } catch (error) {
            self.$commonJs.showMessage(error)
          }
        },
        fail(err) {
          self.$commonJs.logger.debug(err, 'error')
        }
      }, {"X-Merchant-ID": self.shopList[self.shopIndex].shop_id})
    },

    /**
     * 均消走势图表
     */
    getRoomAvgData() {
      const self = this
      const params = {
        begin_date: this.roomAvgTime[0] + ' 12:00:00',
        end_date: this.roomAvgTime[1] + ' 12:00:00',
        compare_begin_date: this.roomAvgContrasTime[0] + ' 12:00:00',
        compare_end_date: this.roomAvgContrasTime[1] + ' 12:00:00'
      }
      this.$commonJs.queryCache('/app/analyse/avgRoomTrend', params, {
        before() {
        },
        success(res) {
          const {
            code,
            data,
            msg,
          } = res
          try {
            let res = {
              categories: data.date.map((item, index) => `${item}/${data.compareDate[index]}`),
              series: [{
                name: "桌均消",
                color: '#cf556c',
                data: data.avgRoomMoney
              },
                {
                  name: "同期",
                  data: data.compareAvgRoomMoney
                }
              ]
            };
            self.roomAvgData = JSON.parse(JSON.stringify(res));
          } catch (error) {
            self.$commonJs.showMessage(error)
          }
        },
        fail(err) {
          self.$commonJs.logger.debug(err, 'error')
        }
      }, {"X-Merchant-ID": self.shopList[self.shopIndex].shop_id})
    },

    /**
     * 优惠券使用量走势
     */
    getCouponUseData() {
      const self = this
      const params = {
        begin_date: this.couponUseTime[0] + ' 12:00:00',
        end_date: this.couponUseTime[1] + ' 12:00:00',
        compare_begin_date: this.couponUseContrasTime[0] + ' 12:00:00',
        compare_end_date: this.couponUseContrasTime[1] + ' 12:00:00'
      }
      this.$commonJs.queryCache('/app/analyse/couponUseTrend', params, {
        before() {
        },
        success(res) {
          const {
            code,
            data,
            msg,
          } = res
          try {
            let res = {
              categories: data.date.map((item, index) => `${item}/${data.compareDate[index]}`),
              series: [{
                name: "使用张数",
                color: '#fda085',
                data: data.useNum
              },
                {
                  name: "同期",
                  color: '#8fd3f4',
                  data: data.compareUseNum
                }
              ]
            };
            self.couponUseData = JSON.parse(JSON.stringify(res));
          } catch (error) {
            self.$commonJs.showMessage(error)
          }
        },
        fail(err) {
          self.$commonJs.logger.debug(err, 'error')
        }
      }, {"X-Merchant-ID": self.shopList[self.shopIndex].shop_id})
    },

    /**
     * 格式化长度
     * @param value
     * @return {string|*}
     */
    formatter(value) {
      return value.length > 5 ? value.slice(0, 5) + '...' : value;
    },

    /**
     * 时间计算
     * @param minutes
     * @return {string}
     */
    convertMinutesToHours(minutes) {
      minutes = Math.round(minutes);
      if (minutes < 0) {
        return "时间错误";
      }
      if (minutes == 0) {
        return '0小时';
      }
      const hours = Math.floor(minutes / 60); // 计算小时
      const remainingMinutes = minutes % 60; // 剩余的分钟数
      return `${hours}小时${remainingMinutes}分钟`;
    },

    /**
     * 默认日期
     * @param status
     */
    defaultDate(status = 'default') {
      // 目前日期 以及 时间
      let today_date = dayjs().format('YYYY-MM-DD')
      let today_time = dayjs().format('HH:mm:ss')
      let start = ''
      let end = ''
      // 判断当前时间是否大于08点，如果大于则减一天  否则减二天
      if (today_time > '08:10:00') {
        end = dayjs(today_date).format('YYYY-MM-DD')
        start = dayjs(end).subtract(7, 'day').format('YYYY-MM-DD')
      } else {
        end = dayjs(today_date).subtract(1, 'day').format('YYYY-MM-DD')
        start = dayjs(end).subtract(7, 'day').format('YYYY-MM-DD')
      }
      switch (status) {
        case 'default':
          this.businessTime = [start, end]
          this.businessRatioTime = [start, end]
          this.roomAvgTime = [start, end]
          this.couponUseTime = [start, end]
          break;
        case 'businessTime':
          this.businessTime = [start, end]
          break;
        case 'businessRatioTime':
          this.businessRatioTime = [start, end]
          break;
        case 'roomAvgTime':
          this.roomAvgTime = [start, end]
          break;
        case 'couponUseTime':
          this.couponUseTime = [start, end]
          break;
      }
    },

    /**
     * 日期最大值判断
     * @return {string}
     */
    maxDate() {
      // 目前日期 以及 时间
      let today_date = dayjs().format('YYYY-MM-DD')
      let today_time = dayjs().format('HH:mm:ss')
      let end = ''
      // 判断当前时间是否大于08点，如果大于则减一天  否则减二天
      if (today_time > '08:10:00') {
        end = dayjs(today_date).add(1, 'day').format('YYYY-MM-DD')
      } else {
        end = dayjs(today_date).format('YYYY-MM-DD')
      }
      return end
    },

    /**
     * 选择日期
     * @param e
     * @param status
     */
    chooseDateSure(e, status) {
      let date1 = dayjs(e[0])
      let date2 = dayjs(e[1])
      let day = date2.diff(date1, 'day')
      if (day < 7) {
        uni.showToast({
          title: '日期最小范围7天',
          icon: 'none',
          duration: 2000
        })
        this.defaultDate(status)
        this.contrastDate()
        return
      }
      let startContrastDate = dayjs(e[0]).subtract(day, 'day').format('YYYY-MM-DD'),
          endContrastDate = e[0]
      switch (status) {
        case 'businessTime':
          this.businessContrasTime = [startContrastDate, endContrastDate]
          break;
        case 'roomAvgTime':
          this.roomAvgContrasTime = [startContrastDate, endContrastDate]
          break;
        case 'couponUseTime':
          this.couponUseContrasTime = [startContrastDate, endContrastDate]
          break;
      }
    },

    /**
     * 默认对比日期
     */
    contrastDate() {
      // 目前日期 以及 时间
      let today_date = dayjs().format('YYYY-MM-DD')
      let today_time = dayjs().format('HH:mm:ss')
      let start = ''
      let end = ''
      // 判断当前时间是否大于08点，如果大于则减一天  否则减二天
      if (today_time > '08:10:00') {
        end = dayjs(today_date).subtract(7, 'day').format('YYYY-MM-DD')
        start = dayjs(end).subtract(7, 'day').format('YYYY-MM-DD')
      } else {
        end = dayjs(today_date).subtract(8, 'day').format('YYYY-MM-DD')
        start = dayjs(end).subtract(7, 'day').format('YYYY-MM-DD')
      }
      this.businessContrasTime = [start, end]
      this.businessContrasTime = [start, end]
      this.roomAvgContrasTime = [start, end]
      this.couponUseContrasTime = [start, end]
    },
  }
}
</script>

<style lang="scss" scoped>
.sub-title {
  font-size: 26rpx;
  color: var(--white-text);
  font-weight: 600;
}

.date-display-center {
  width: 60rpx;
  height: auto;
  font-size: 28rpx;
  text-align: center;
  color: var(--text-color);
  font-weight: 600;
}

.flex-date {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-grow: 1;
  align-items: center;
}

.date-display-custom {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.date-display-custom-date {
  height: auto;
  font-size: 28rpx;
  font-weight: 600;
  text-align: center;
  color: var(--text-color)
}

.body-content {
  background-color: var(--bg-center-color);
  height: auto;
  border-radius: 6rpx;
  padding: 0 20rpx 20rpx 20rpx;
}

.body-title {
  height: 78rpx;
  line-height: 78rpx;
  font-size: 28rpx;
  color: var(--white-text);
  font-weight: 600;
}

.header-field-title-split {
  height: 50rpx;
  width: 2rpx;
  background: var(--line-color);
  transform-origin: top left;
  transform: scaleX(0.7);
}

.content-value {
  font-size: 26rpx;
  color: var(--white-text);
}

.content-intro {
  font-size: 26rpx;
  color: var(--grey-text);
}

.scroll {
  box-sizing: border-box;
  display: flex;
  position: absolute;
  padding: 4rpx 30rpx 4rpx 30rpx;
}

.flex {
  display: flex;
  align-items: center;

  &-row {
    flex-direction: row;
  }

  &-wrap {
    flex-wrap: wrap;
  }

  &-nowrap {
    flex-wrap: nowrap;
  }

  &-col {
    flex-direction: column;
  }

  &-1 {
    flex: 1;
  }

  &-shrink {
    flex-shrink: 0;
  }

  &-jus-cen {
    justify-content: center;
  }

  &-jus-bet {
    justify-content: space-between;
  }

  &-jus-end {
    justify-content: end;
  }

  &-jus-aro {
    justify-content: space-around;
  }

  &-jus-eve {
    justify-content: space-evenly;
  }

  &-jus-self-end {
    justify-self: end;
  }

  &-ali-cen {
    align-items: center;
  }

  &-ali-sta {
    align-items: flex-start;
  }

  &-ali-end {
    align-items: flex-end;
  }
}
</style>